<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="userCommon::common-header"></head>
<body class="sb-nav-fixed">
<nav th:replace="userCommon::common-navbar"></nav>
<div id="layoutSidenav">
    <div th:replace="userCommon::common-sidenav"></div>
    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h1 class="mt-4">充值课程</h1>
                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a th:href="@{/toUserMain}">主页</a></li>
                    <li class="breadcrumb-item active">充值</li>
                </ol>

                <!-- 充值说明 -->
                <div class="alert alert-info mb-3">
                    <strong>充值说明：</strong>
                    每个课时价值 <span class="text-danger">10元</span>，请确认充值数量。
                </div>

                <!-- 充值表单 -->
                <form th:action="@{/user/recharge}" method="post" onsubmit="return validateForm()">
                    <div class="row mb-3">
                        <label for="rechargeAmount" class="col-md-2 col-form-label">充值课时：</label>
                        <div class="col-md-6">
                            <input type="number" class="form-control" id="rechargeAmount" name="rechargeAmount" min="1" required>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">确认充值</button>
                </form>

                <!-- 成功提示框（隐藏） -->
                <div id="successModal" class="modal fade" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">充值成功</h5>
                            </div>
                            <div class="modal-body">
                                <p>您已成功充值 <span id="rechargedAmount"></span> 课时，共 <span id="totalPrice"></span> 元。</p>
                            </div>
                            <div class="modal-footer">
                                <!-- 修正：使用Thymeleaf生成正确路径，避免上下文路径问题 -->
                                <button type="button" class="btn btn-primary" th:onclick="|window.location.href='@{/user/toUserMain}'|">知道了</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer th:replace="userCommon::common-footer"></footer>
    </div>
</div>
<!-- 修正：Thymeleaf 3推荐用th:replace替代th:include -->
<div th:replace="userCommon::common-scripts"></div>

<script>
    function showSuccess(amount) {
        const numAmount = parseInt(amount, 10);
        document.getElementById('rechargedAmount').textContent = numAmount;
        document.getElementById('totalPrice').textContent = numAmount * 10;
        new bootstrap.Modal(document.getElementById('successModal')).show();
    }

    function validateForm() {
        const amount = document.getElementById('rechargeAmount').value;
        if (amount <= 0 || isNaN(amount)) {
            alert('充值课时必须是大于0的数字');
            return false;
        }
        return true;
    }

    window.onload = function() {
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('success')) {
            const amount = urlParams.get('success');
            showSuccess(amount);
        }
    }
</script>
</body>
</html>